//监控
(function () {
    $(' .monitor .tabs').on('click', 'a', function () {
        $(this).addClass('active').siblings('a').removeClass('active');
        let index = $(this).index();
        $('.content').eq(index).show().siblings('.content').hide();
    });
    $('.marquee-view .marquee').each(function () {
        const rows = $(this).children().clone();
        $(this).append(rows);
    });
})();
(function () {
    const myChart = echarts.init(document.querySelector('.pie'));
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
            {
                color: [
                    '#006cff',
                    '#60cda0',
                    '#ed8884',
                    '#ff9f7f',
                    '#0096ff',
                    '#9fe6b8',
                    '#32c5e9',
                    '#1d9dff',
                ],
                name: '点位分布统计',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5,
                },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' },
                ],
                label: {
                    fontSize: 10,
                },
                labelLine: {
                    // 连接扇形图线长
                    length: 6,
                    // 连接文字线长
                    length2: 8,
                },
            },
        ],
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();
//柱状图
(function () {
    // 中间省略的数据  准备三项
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065',
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065',
            },
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0',
        },
    };
    const myChart = echarts.init(document.querySelector('.bar'));
    const option = {
        tooltip: {
            trigger: 'item',
            // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
            // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            // }
        },
        // 直角坐标系内绘图网格（区域）
        grid: {
            top: '3%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)',
        },

        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: [
                    '上海',
                    '广州',
                    '北京',
                    '深圳',
                    '合肥',
                    '',
                    '......',
                    '',
                    '杭州',
                    '厦门',
                    '济南',
                    '成都',
                    '重庆',
                ],
                // 刻度设置
                axisTick: {
                    // true意思：图形和刻度居中中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false,
                },
                // x坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd',
                },
                // x坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    },
                },
            },
        ],
        yAxis: {
            type: 'value',
            axisTick: {
                // true意思：图形和刻度居中中间
                // false意思：图形在刻度之间
                alignWithLabel: false,
                // 不显示刻度
                show: false,
            },
            // x坐标轴文字标签样式设置
            axisLabel: {
                color: '#4c9bfd',
            },
            // x坐标轴颜色设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                    // width:8,  x轴线的粗细
                    // opcity: 0,   如果不想显示x轴线 则改为 0
                },
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                },
            },
        },
        series: [
            {
                // 修改线性渐变色方式 1
                color: new echarts.graphic.LinearGradient(
                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                    0,
                    0,
                    0,
                    1,
                    [
                        { offset: 0, color: '#00fffb' }, // 0 起始颜色
                        { offset: 1, color: '#0061ce' }, // 1 结束颜色
                    ],
                ),
                data: [
                    2100,
                    1900,
                    1700,
                    1560,
                    1400,
                    item,
                    item,
                    item,
                    900,
                    750,
                    600,
                    480,
                    240,
                ],
                type: 'bar',
            },
        ],
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();

//销售模块
(function () {
    const myChart = echarts.init(document.querySelector('.line'));
    const data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
        ],
    };
    const option = {
        tooltip: {
            trigger: 'axis',
        },
        // 设置网格样式
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true, // 显示边框
            borderColor: '#012f4a', // 边框颜色
            containLabel: true, // 包含刻度文字在内
        },
        // 图例组件
        legend: {
            textStyle: {
                color: '#4c9bfd', // 图例文字颜色
            },
            right: '10%', // 距离右边10%
        },
        xAxis: {
            type: 'category',
            data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月',
            ],
            axisTick: {
                show: false, // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd', // 文本颜色
            },
            axisLine: {
                show: false, // 去除轴线
            },
            boundaryGap: false, // 去除轴内间距
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false, // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd', // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a', // 分割线颜色
                },
            },
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [
            {
                name: '预期销售额',
                data: data.year[0],
                type: 'line',
                smooth: true,
            },
            {
                name: '实际销售额',
                data: data.year[1],
                type: 'line',
                smooth: true,
            },
        ],
    };
    myChart.setOption(option);
    $('.sales .caption').on('click', 'a', function () {
        index = $(this).index() - 1;
        $(this).addClass('active').siblings('a').removeClass('active');
        const type = $(this).data('type');
        const currentData = data[type];
        option.series[0].data = currentData[0];
        option.series[1].data = currentData[1];
        myChart.setOption(option);
    });
    let index = 0;
    let timer = setInterval(function () {
        index++;
        if (index >= 4) {
            index = 0;
            $('.sales .caption a').eq(index).click();
        } else {
            $('.sales .caption a').eq(index).click();
        }
    }, 3000);
    $('.sales ').hover(
        function () {
            clearInterval(timer);
        },
        function () {
            let index = 0;
            timer = setInterval(function () {
                index++;
                if (index >= 4) {
                    index = 0;
                    $('.sales .caption a').eq(index).click();
                } else {
                    $('.sales .caption a').eq(index).click();
                }
            }, 1000);
        },
    );
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();
//订单区域
(function () {
    const data = {
        day365: { orders: '20,301,987', amount: '99834' },
        day90: { orders: '301,987', amount: '9834' },
        day30: { orders: '1,987', amount: '3834' },
        day1: { orders: '987', amount: '834' },
    };
    $('.filter a').on('click', function () {
        index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        // console.log($(this).data("type"));
        $('.filter a').each(function (i, e) {
            const key = Object.keys(data)[i];
            $('.filter a').eq(i).data('type', key);
        });
        const dataKey = $(this).data('type');
        $('.order .item h4').eq(0).text(data[dataKey].orders);
        $('.order .item h4').eq(1).text(data[dataKey].amount);
    });
    let index = 0;
    let timer = setInterval(function () {
        index++;
        if (index >= 4) {
            index = 0;
        }
        $('.filter a').eq(index).click();
    }, 2000);
    $('.order').hover(
        function () {
            clearInterval(timer);
        },
        function () {
            clearInterval();
            timer = setInterval(function () {
                index++;
                if (index >= 4) {
                    index = 0;
                }
                $('.filter a').eq(index).click();
            }, 2000);
        },
    );
})();
//销售渠道模块
(function () {
    const myChart = echarts.init(document.querySelector('.radar'));
    const option = {
        // backgroundColor: "#161627",

        // visualMap: {
        //     show: true,
        //     min: 0,
        //     max: 20,
        //     dimension: 6,
        //     inRange: {
        //         colorLightness: [0.5, 0.8]
        //     }
        // },

        radar: {
            center: ['50%', '50%'],
            radius: '65%',
            // 雷达图的指示器 内部填充数据
            indicator: [
                { name: '机场', max: 100 },
                { name: '商场', max: 100 },
                { name: '火车站', max: 100 },
                { name: '汽车站', max: 100 },
                { name: '地铁', max: 100 },
            ],
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)',
                    // width: 1,
                    // type: 'solid'
                },
            },

            shape: 'circle',
            splitNumber: 4,
            name: {
                // 修饰雷达图文本颜色
                textStyle: {
                    color: '#4c9bfd',
                },
            },
            splitLine: {
                lineStyle: {
                    color: ['rgba(255,255,255,.5)'],
                },
            },
            splitArea: {
                show: false,
            },

            // 线条样式
            lineStyle: {
                normal: {
                    color: '#fff',
                    // width: 1
                },
            },
        },
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置
            position: ['60%', '10%'],
        },
        series: [
            {
                name: '北京',
                type: 'radar',
                // 线条样式
                lineStyle: {
                    normal: {
                        color: '#fff',
                        // width: 1
                    },
                },
                data: [[90, 19, 56, 11, 34]],
                // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
                symbol: 'circle',
                // 拐点的大小
                symbolSize: 5,
                // 小圆点（拐点）设置为白色
                itemStyle: {
                    color: '#fff',
                },
                // 在圆点上显示相关数据
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 10,
                },
                areaStyle: {
                    color: 'rgba(238, 197, 102, 0.6)',
                },
            },
        ],
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();
//销售进度
(function () {
    const myChart = echarts.init(document.querySelector('.gauge'));
    const option = {
        series: [
            {
                name: '销售进度',
                type: 'pie',
                radius: ['130%', '150%'],
                // 移动下位置  套住50%文字
                center: ['48%', '80%'],
                label: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold',
                    },
                },
                labelLine: {
                    show: false,
                },
                startAngle: 180,
                hoverOffset: 0,
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            // 颜色渐变#00c9e0->#005fc1
                            color: new echarts.graphic.LinearGradient(
                                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: '#00c9e0' }, // 0 起始颜色
                                    { offset: 1, color: '#005fc1' }, // 1 结束颜色
                                ],
                            ),
                        },
                    }, // 不需要名称
                    { value: 100, itemStyle: { color: '#12274d' } }, // 不需要名称
                    { value: 200, itemStyle: { color: 'transparent' } }, // 透明隐藏第三块区域
                ],
            },
        ],
    };
    myChart.setOption(option);
})();
//top模块
(function () {
    function render(ele) {
        ele.addClass('active').siblings().removeClass();
        const index = ele.index();
        const currentData = hotData[index].brands;
        let subStr = '';
        $.each(currentData, function (i, item) {
            const className = item.flag ? 'icon-up' : 'icon-down';
            subStr += `<li>
    <span>${item.name}</span>
    <span>${item.num} <s class=${className}></s></span>
  </li>`;
        });
        $('.sub').html(subStr);
    }
    var hotData = [
        {
            city: '北京', // 城市
            sales: '25,179', // 销售额
            flag: true, //  上升还是下降
            brands: [
                //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ],
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ],
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ],
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ],
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ],
        },
    ];
    let supStr = '';
    $.each(hotData, function (i, item) {
        const className = item.flag ? 'icon-up' : 'icon-down';
        supStr += `<li>
    <span>${item.city}</span>
    <span>${item.sales} <s class=${className}></s></span>
  </li>`;
    });
    let index = 0;
    $('.sup').html(supStr);
    $('.province .sup').on('mouseenter', 'li', function () {
        index = $(this).index();
        render($(this));
    });
    $('.province .sup li').eq(0).mouseenter();
    const lis = $('.province .sup li');

    let timer = setInterval(function () {
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
    }, 2000);
    lis.hover(
        function () {
            clearInterval(timer);
        },
        function () {
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                if (index >= 5) index = 0;
                // lis.eq(index).mouseenter();
                render(lis.eq(index));
            }, 2000);
        },
    );
})();
